<template>
  <div class="box">
    <div class="container">
      <el-card shadow="hover" style="padding:0 50px;background:rgba(197, 216, 217, 1) ">
        <h1>通用后台管理系统</h1>
        <el-form :model="user" label-width="80px">
          <el-form-item label="账号：">
            <el-input v-model="user.UserName" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码：" >
            <el-input placeholder="请输入密码" show-password v-model="user.PassWrod"></el-input>
          </el-form-item>
          <el-button @click="Register" type="danger" style="margin-right: 2vw; width: 5vw" >去注册</el-button>
          <el-button @click="LoGin" type="danger" style="width: 5vw">登入</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";
import Request from '../Network/axios'

export default {
  name: "IsEnter",

  data(){
    return{
      user:{
        UserName:'',
        PassWrod:'',
      }
    }
  },

  methods:{
    //登入
    /**
     * *** 登入思路 ***
     *
     * 1.获取到用户输入的内容进行数据对比 或 进行 get请求数据，如果匹配到 则获取该条用户的信息，
     * 2.获取token， 进行设置token
     * 3.通过不同 token 进行 get 请求到不同的 nav 的数据
     */


    /**
     * 以下为的登入
     */
    LoGin(){
      Request({
        url: '/user/Login',
        method: 'post',
        data: {
          username: this.user.UserName,
          password: this.user.PassWrod
        }
      }).then(res => {
        // 验证账号密码
        if (res.data.status >= 400){
          return Message({
            message: res.data.message,
            type:"warning",
            showClose:true
          });
        }

        // 验证成功
        this.$store.commit('setToken', res.data.tokenStr)

        localStorage.setItem('username', this.user.UserName)


        this.$router.replace({
          name:'IsContainer',
        });

        Message({
          message: res.data.message,
          type: "success",
          showClose:true
        });

      }).catch(err => {
        Message({
          message: err,
          type: "warning",
          showClose:true
        });
      })
    },

    /**
     * 注册
     */
    Register(){
      this.$router.replace({
        name: 'IsRegister'
      })
    }
  }
}
</script>

<style scoped>
.box{
  background-image: url("../assets/BGImage.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 200px;
  height: 737px;
}
.container{
  opacity: 0.8;
  width: 30vw;
  text-align: center;
  margin: 0 auto;
}
h1{
  margin: 3vh 0;
}
</style>